<template>
  <n-layout class="h-screen">
    <layout-header
        :dropdown-options="headerDropdownOptions"
        title="管理后台"
        @on-select="onDropdownSelected"/>
    <n-layout
        position="absolute"
        :style="{top: `${themeStore.layoutHeaderHeight}px`, bottom: `${themeStore.layoutFooterHeight}px`}"
        has-sider>
      <layout-sider :collapsed="collapsed" :options="menuOptions"/>
      <layout-content>
        <router-view/>
      </layout-content>
    </n-layout>
    <layout-footer/>
  </n-layout>
</template>

<script setup>
import {LayoutContent, LayoutFooter, LayoutHeader, LayoutSider} from '../layouts/index.js'
import {useMessage} from 'naive-ui'
import {useThemeStore} from "../store/theme/index.js";
import {computed, h, ref} from "vue";
import {renderIcon} from "../utils/index.js";
import {DashboardOutlined, InfoRound, LogOutRound} from '@vicons/material'
import {useSysUserStore} from "../store/sys-user/index.js";
import {logout, profile} from "../apis/sys/user/index.js";
import {useRouter} from "vue-router";
import {useSystemStore} from "../store/system/index.js";
import {MIcon} from "../components/index.js";

const router = useRouter()
const message = useMessage()
const systemStore = useSystemStore()
const sysUserStore = useSysUserStore()
const themeStore = useThemeStore()
const collapsed = ref(false)
const menuOptions = computed(() => [{
  key: 'Dashboard',
  label: "Dashboard",
  icon: () => h(MIcon, {icon: DashboardOutlined}),
  type: 'C'
}].concat(systemStore.menuTree))

const headerDropdownOptions = [
  {
    label: "修改密码",
    key: "profile",
    icon: renderIcon(InfoRound),
    event: () => {

    }
  },
  {
    label: "退出登录",
    key: "logout",
    icon: renderIcon(LogOutRound),
    event: async () => {
      await logout()
      await sysUserStore.logout()
      await router.replace({name: 'Login'})
      message.success('退出登录成功')
    }
  }
]

const onDropdownSelected = (key, option) => {
  option.event();
}

</script>


<style scoped>

</style>
